<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">

<head>

	<title>Modulous Examples</title>
	<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
	<meta name="description" content="jQ-onDemand was written by: Francis Albar, Dennis Hall, Brian Fletcher, and Fred Welterlin" />

	<link rel="stylesheet" type="text/css" media="screen" href="css/screen.css" />
	<link rel="stylesheet" type="text/css" media="print" href="css/print.css" />

	<script type="text/javascript" src="js/swfobject.js"></script>
	<script type="text/javascript">

	// this script identifies the current browser/browser version and places a class in the HTML tag for browser specific CSS styling
	//  <![CDATA[
		(function(){
			var ua = navigator.userAgent;
			var ie = /MSIE/.test(ua) && ua.replace(/.*?MSIE (.).*/,"$1");
			var ff = /Firefox/.test(ua) && ua.replace(/.*?Firefox\/(.)\.(.).*/,"$1_$2");
			var safari = /Safari/.test(ua) && ua.replace(/.*?Version\/(.).*/,"$1");
			var chrome = /Chrome/.test(ua) && ua.replace(/.*?Chrome\/(.).*/,"$1");
			var opera = /Opera/.test(ua) && ua.replace(/.*?Opera\/(.).*/,"$1");
			document.getElementsByTagName("html")[0].className="js"+(ie ? " ie ie" + ie : ff ? " ff ff" + ff : chrome ? " chrome chrome" + chrome : safari ? " safari safari" + safari : opera ? " opera opera" + opera : "");
		})();
	//  ]]>

	</script>

</head>

<body class="some-class">

<!-- START GLOBAL WRAPPER -->
<div class="glb-wrapper">
<div class="glb-wrapper-inner">

	<!-- START GLOBAL HEADER -->
	<div class="glb-hdr-container">
	<div class="glb-hdr">

		<p class="skip-nav">[ <a href="#main-content">Skip to Main Content</a> ]</p>		
		<div class="enable-js">JavaScript is disabled in your web browser! Please enable this feature in order to take full advantage of this site.</div>

		<h1><img src="images/logo-modulous.gif" alt="Modulous" /><sup>version 1.0 - July 2010</sup></h1>
		<em>jQuery based client-side architecture used for template development on projects with no back-end.</em>

		<ul>
		<li>Francis Albar</li>
		<li>Dennis Hall</li>
		<li>Brian Fletcher</li>
		<li>Fred Welterlin</li>
		</ul>

		<div class="hr top"><hr/></div>

		<p>The core functionality addresses performance and page weight considerations by collecting all <strong>class</strong> attributes onDomReady, and loading components based on matches made from an array of keywords. Additionally, the architecture includes functionality for easy cross-browser (browser + browser version) styling without the need for traditional CSS hacks. For use on Razorfish projects only!</p>
		<p>Although Modulous can be used to load any type of component (pre-canned script or custom code), we are providing some common, third party written, interaction patterns that we have hand selected as stable widgets.</p>

	</div>
	</div>
	<!-- END GLOBAL HEADER -->

	<!-- START GLOBAL BODY -->
	<div class="glb-bdy-container">
	<div class="glb-bdy">

		<div id="main-content">

			<div class="row">

				<div class="hr top"><hr/></div>
				<h2>Carousel/Slideshow</h2>
				<div class="hr"><hr/></div>
				<cite>Carousel uses "jCarousel Lite" third party plug-in (http://gmarwaha.com/jquery/jcarousellite/)<br />Slideshow uses "jQuery Cycle Plugin" third party plug-in (http://jquery.malsup.com/cycle/)</cite>

				<div class="carousel-container">

					<a class="prev" href="#"><span>Previous</span></a> <a class="next" href="#"><span>Next</span></a>

					<div class="carousel">
					<ul>
					<li>
						<a href="#"><img src="images/fpo-surfing-2.jpg" alt="FPO" /></a>
						<p>Sit amet, consectetur.</p>
					</li>
					<li>
						<a href="#"><img src="images/fpo-surfing-3.jpg" alt="FPO" /></a>
						<p>Dolor sit amet, elit.</p>
					</li>
					<li>
						<a href="#"><img src="images/fpo-surfing-4.jpg" alt="FPO" /></a>
						<p>Consectetur adipisicing elit.</p>
					</li>
					<li>
						<a href="#"><img src="images/fpo-surfing-5.jpg" alt="FPO" /></a>
						<p>Lorem ipsum dolor sit amet.</p>
					</li>
					</ul>
					</div>

				</div>

				<div class="slideshow-container">

					<ul class="slideshow">
					<li>
						<a href="#"><img src="images/fpo-surfing-1.jpg" alt="FPO" /></a>
						<p>Ipsum consectetur adipcing.</p>
					</li>
					<li>
						<a href="#"><img src="images/fpo-surfing-2.jpg" alt="FPO" /></a>
						<p>Sit amet, consectetur.</p>
					</li>
					<li>
						<a href="#"><img src="images/fpo-surfing-3.jpg" alt="FPO" /></a>
						<p>Dolor sit amet, elit.</p>
					</li>
					<li>
						<a href="#"><img src="images/fpo-surfing-4.jpg" alt="FPO" /></a>
						<p>Consectetur adipisicing elit.</p>
					</li>
					</ul>
					<div class="slideshow-nav"></div>

				</div>

			</div>

			<div class="row">

				<div class="hr"><hr /></div>
				<h2>Tool Tip</h2>
				<div class="hr"><hr /></div>
				<cite>Uses "bassistance.de tooltip plugin" third party plug-in (http://bassistance.de/jquery-plugins/jquery-plugin-tooltip/)</cite>

				<p>
				<a class="tooltip" href="#example-tip"><img src="images/fpo-btn-glb-tooltip.gif" alt="tool tip" /></a>
				<span id="example-tip" class="tooltip-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor.<br /><br /></span>
				</p>

			</div>

			<div class="row">
			
				<div class="hr top"><hr/></div>
				<h2>Data Table</h2>
				<div class="hr"><hr/></div>
				<cite>Uses "tablesorter" third party plug-in (http://tablesorter.com/docs/)</cite>

				<div class="module">

					<div class="module-head">
						<div class="table-filter-container tablefilter"></div>
						<h2>Sortable Table Title</h2>
					</div>

					<div class="scroll-table-bdy">
					<table cellspacing="0" class="tablesorter">
					<thead>
					<tr>
						<th class="col1">Column Title</th>
						<th>Column Title</th>
						<th>Column Title</th>
					</tr>
					</thead>
					<tbody>
					<tr>
						<td class="col1">Alpha</td>
						<td class="col2">101 Higuera St., San Luis Obispo CA 94103</td>
						<td class="col3">5</td>
					</tr>
					<tr>
						<td class="col1">Beta</td>
						<td class="col2">23094 El Camino Real Unit 5B, Atascedero CA 93422</td>
						<td class="col3">3</td>
					</tr>
					<tr>
						<td class="col1">Gamma</td>
						<td class="col2">101 Higuera St., San Luis Obispo CA 94103</td>
						<td class="col3">4</td>
					</tr>
					<tr>
						<td class="col1">Delta</td>
						<td class="col2">23094 El Camino Real Unit 5B, Atascedero CA 93422</td>
						<td class="col3">1</td>
					</tr>
					<tr>
						<td class="col1">Theta</td>
						<td class="col2">101 Higuera St., San Luis Obispo CA 94103</td>
						<td class="col3">7</td>
					</tr>
					<tr>
						<td class="col1">Tau</td>
						<td class="col2">23094 El Camino Real Unit 5B, Atascedero CA 93422</td>
						<td class="col3">6</td>
					</tr>
					
					<tr>
						<td class="col1">Omega</td>
						<td class="col2">101 Higuera St., San Luis Obispo CA 94103</td>
						<td class="col3">2</td>
					</tr>
					<tr>
						<td class="col1">Lambda</td>
						<td class="col2">23094 El Camino Real Unit 5B, Atascedero CA 93422</td>
						<td class="col3">9</td>
					</tr>
					<tr>
						<td class="col1">Eta</td>
						<td class="col2">101 Higuera St., San Luis Obispo CA 94103</td>
						<td class="col3">8</td>
					</tr>
					<tr>
						<td class="col1">Omicron</td>
						<td class="col2">23094 El Camino Real Unit 5B, Atascedero CA 93422</td>
						<td class="col3">10</td>
					</tr>
					<tr>
						<td class="col1">Upsilon</td>
						<td class="col2">101 Higuera St., San Luis Obispo CA 94103</td>
						<td class="col3">11</td>
					</tr>
					<tr>
						<td class="col1">Pi</td>
						<td class="col2">23094 El Camino Real Unit 5B, Atascedero CA 93422</td>
						<td class="col3">12</td>
					</tr>
					</tbody>
					</table>
					</div>
					<div class="scroll-table-ftr">Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non.</div>

				</div>

			</div>

			<div class="row">

				<div class="hr"><hr /></div>
				<h2>Dismissable Alert</h2>
				<div class="hr"><hr /></div>
				<cite></cite>

				<div class="dismissable-alert">
					<h2><img src="css/images/icon-error-alert.gif" alt="Alert" /> Ut enim ad minim veniam</h2>
					<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</p>
					<a href="#">Learn about PDP and view more meter details</a>
					<a class="close" href="#">Close this alert</a>
				</div>

			</div>

			<div class="row">

				<div class="hr"><hr /></div>
				<h2>Accordion</h2>
				<div class="hr"><hr /></div>
				<cite>Uses "Accordion" jQuery UI plug-in (http://docs.jquery.com/UI)</cite>

				<div class="accordion module module-grad">

					<div class="module-head"><h2>Lorem Ipsum Dolor</h2></div>
					<div class="content"><img src="images/fpo-surfing-1.jpg" alt="" /> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla eget nibh nulla, sed volutpat erat. Nulla scelerisque metus quis quam ornare aliquet. Suspendisse potenti. Phasellus ipsum augue, gravida vitae mattis nec, viverra vitae leo. Nunc id augue justo, et consequat lorem. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed fringilla sollicitudin lobortis. Maecenas tempus pellentesque laoreet. Praesent sollicitudin, quam non sodales eleifend, justo enim ultrices sem, at tempus orci ante cursus magna. Praesent a ligula lectus, eu pellentesque augue. Aliquam nisl justo, condimentum a consequat in, viverra et neque. Nullam erat ligula, dignissim tempus eleifend quis, malesuada a orci. Mauris viverra neque eget magna dictum id accumsan nibh euismod. Praesent at massa sed dui interdum ultrices. Ut vitae porttitor augue. Duis tincidunt velit eu purus pellentesque nec rutrum ante molestie.</div>
					<div class="module-head"><h2>Consectetur Adipiscing</h2></div>
					<div class="content"><img src="images/fpo-surfing-2.jpg" alt="" /> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla eget nibh nulla, sed volutpat erat. Nulla scelerisque metus quis quam ornare aliquet. Suspendisse potenti. Phasellus ipsum augue, gravida vitae mattis nec, viverra vitae leo. Nunc id augue justo, et consequat lorem. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed fringilla sollicitudin lobortis. Maecenas tempus pellentesque laoreet. Praesent sollicitudin, quam non sodales eleifend, justo enim ultrices sem, at tempus orci ante cursus magna. Praesent a ligula lectus, eu pellentesque augue. Aliquam nisl justo, condimentum a consequat in, viverra et neque. Nullam erat ligula, dignissim tempus eleifend quis, malesuada a orci. Mauris viverra neque eget magna dictum id accumsan nibh euismod. Praesent at massa sed dui interdum ultrices. Ut vitae porttitor augue. Duis tincidunt velit eu purus pellentesque nec rutrum ante molestie.</div>
					<div class="module-head"><h2>Nulla Eget Nibh Nulla, Sed Volutpat Erat</h2></div>
					<div class="content"><img src="images/fpo-surfing-3.jpg" alt="" /> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla eget nibh nulla, sed volutpat erat. Nulla scelerisque metus quis quam ornare aliquet. Suspendisse potenti. Phasellus ipsum augue, gravida vitae mattis nec, viverra vitae leo. Nunc id augue justo, et consequat lorem. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed fringilla sollicitudin lobortis. Maecenas tempus pellentesque laoreet. Praesent sollicitudin, quam non sodales eleifend, justo enim ultrices sem, at tempus orci ante cursus magna. Praesent a ligula lectus, eu pellentesque augue. Aliquam nisl justo, condimentum a consequat in, viverra et neque. Nullam erat ligula, dignissim tempus eleifend quis, malesuada a orci. Mauris viverra neque eget magna dictum id accumsan nibh euismod. Praesent at massa sed dui interdum ultrices. Ut vitae porttitor augue. Duis tincidunt velit eu purus pellentesque nec rutrum ante molestie.</div>
					<div class="module-head"><h2>Quis Quam Ornare Aliquet</h2></div>
					<div class="content"><img src="images/fpo-surfing-4.jpg" alt="" /> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla eget nibh nulla, sed volutpat erat. Nulla scelerisque metus quis quam ornare aliquet. Suspendisse potenti. Phasellus ipsum augue, gravida vitae mattis nec, viverra vitae leo. Nunc id augue justo, et consequat lorem. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed fringilla sollicitudin lobortis. Maecenas tempus pellentesque laoreet. Praesent sollicitudin, quam non sodales eleifend, justo enim ultrices sem, at tempus orci ante cursus magna. Praesent a ligula lectus, eu pellentesque augue. Aliquam nisl justo, condimentum a consequat in, viverra et neque. Nullam erat ligula, dignissim tempus eleifend quis, malesuada a orci. Mauris viverra neque eget magna dictum id accumsan nibh euismod. Praesent at massa sed dui interdum ultrices. Ut vitae porttitor augue. Duis tincidunt velit eu purus pellentesque nec rutrum ante molestie.</div>

				</div>

			</div>

			<div class="row">

				<div class="hr"><hr /></div>
				<h2>Tabs</h2>
				<div class="hr"><hr /></div>
				<cite>Uses "Tabs" jQuery UI plug-in (http://docs.jquery.com/UI)</cite>

				<div class="tabs" id="tabs">

					<ul>
						<li><a href="#tabs-1"><span>Lorem</span></a></li>
						<li><a href="#tabs-2"><span>Praesent</span></a></li>
						<li><a href="#tabs-3"><span>At Vero Eos</span></a></li>
						<li><a href="#tabs-4"><span>Nam Libero</span></a></li>
					</ul>

					<div id="tabs-1">
					<div class="tabs-panel-inner">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla eget nibh nulla, sed volutpat erat. Nulla scelerisque metus quis quam ornare aliquet. Suspendisse potenti. Phasellus ipsum augue, gravida vitae mattis nec, viverra vitae leo. Nunc id augue justo, et consequat lorem. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed fringilla sollicitudin lobortis. Maecenas tempus pellentesque laoreet.</div>
					</div>

					<div id="tabs-2">
					<div class="tabs-panel-inner">Praesent sollicitudin, quam non sodales eleifend, justo enim ultrices sem, at tempus orci ante cursus magna. Praesent a ligula lectus, eu pellentesque augue. Aliquam nisl justo, condimentum a consequat in, viverra et neque. Nullam erat ligula, dignissim tempus eleifend quis, malesuada a orci. Mauris viverra neque eget magna dictum id accumsan nibh euismod. Praesent at massa sed dui interdum ultrices. Ut vitae porttitor augue. Duis tincidunt velit eu purus pellentesque nec rutrum ante molestie.</div>
					</div>

					<div id="tabs-3">
					<div class="tabs-panel-inner">At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio.</div>
					</div>

					<div id="tabs-4">
					<div class="tabs-panel-inner">Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.</div>
					</div>

				</div>

			</div>

			<div class="row">

				<div class="hr"><hr /></div>
				<h2>Modal Dialog</h2>
				<div class="hr"><hr /></div>
				<cite>Uses "Simplemodal" third party plug-in (http://www.ericmmartin.com/projects/simplemodal/)</cite>

				<p>[ <a href="#modal-example-content" class="simplemodal">Click here for a modal dialog</a> ]</p>

				<div id="modal-example-content" class="modal-container">
					<img src="images/fpo-surfing-2.jpg" alt="" />
					<img src="images/fpo-surfing-3.jpg" alt="" />
					<img src="images/fpo-surfing-4.jpg" alt="" />
					<img src="images/fpo-surfing-5.jpg" alt="" />
				</div>

			</div>

			<div class="row">

				<div class="hr"><hr /></div>
				<h2>Date Picker</h2>
				<div class="hr"><hr /></div>
				<cite></cite>

				<form id="datepicker-form" action="">

					<fieldset>
					<legend>Select Date</legend>
	
						<p>
							<label for="pick-date">Date:</label>
							<input type="text" class="datepicker" id="pick-date" name="pick-date" />
							<span class="calendar-icon"></span>
						</p>
	
					</fieldset>

				</form>

			</div>

			<div class="row">

				<div class="hr"><hr /></div>
				<h2>Validation</h2>
				<div class="hr"><hr /></div>
				<cite>Uses "bassistance.de validation plugin" third party plug-in (http://bassistance.de/jquery-plugins/jquery-plugin-validation/)</cite>

				<form id="registration-form" class="validate" action="">

					<fieldset>
					<legend>General Account Information</legend>

						<p>
							<label for="first-name">Account Holder First Name:<em>*</em></label>
							<input type="text" id="first-name" name="first-name" />
						</p>

						<p>
							<label for="last-name">Account Holder Last Name:<em>*</em></label>
							<input type="text" id="last-name" name="last-name" />
						</p>

						<p>
							<label for="account-number">Account Number:<em>*</em></label>
							<input type="text" id="account-number" name="account-number" />
							<a class="tooltip" title="tooltip message" href="#account-number-tip"><img src="images/fpo-btn-glb-tooltip.gif" alt="tool tip" /></a>
						</p>

						<div id="account-number-tip" class="tooltip-body">Sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt.<br /><br /></div>

						<p>
							<label for="account-type">Account Type:<em>*</em></label>
							<select id="account-type" name="account-type">
								<option value="">Select One</option>
								<option>type 1</option>
								<option>type 2</option>
							</select>
							<a class="tooltip" title="tooltip message" href="#account-type-tip"><img src="images/fpo-btn-glb-tooltip.gif" alt="tool tip" /></a>
						</p>

						<div id="account-type-tip" class="tooltip-body">Tomnis iste natus error sit voluptatem accusantium rerum facilis est et expedita distinctio.<br /><br /></div>

						<p>
							<label for="email">Email Address:<em>*</em></label>
							<input type="text" id="email" name="email" />
							<a class="tooltip" title="tooltip message" href="#email-address-tip"><img src="images/fpo-btn-glb-tooltip.gif" alt="tool tip" /></a>
						</p>

						<div id="email-address-tip" class="tooltip-body">Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit.<br /><br /></div>

						<p>
							<label for="confirm-email">Confirm Email Address:<em>*</em></label>
							<input type="text" id="confirm-email" name="confirm-email" />
						</p>

						<p>
							<label for="username">Create Username:<em>*</em></label>
							<input type="text" id="username" name="username" />
						</p>

						<p>
							<label for="password">Create Password:<em>*</em></label>
							<input type="password" id="password" name="password" class="password" />
						</p>

						<p>
							<label for="confirm-password">Confirm Password:<em>*</em></label>
							<input type="password" id="confirm-password" name="confirm-password" />
						</p>

					</fieldset>

					<fieldset>

						<p class="submit">
							<span class="button-group">
								<input type="submit" value="submit" />
							</span>
						</p>

					</fieldset>

				</form>

			</div>
			
			<div class="row">

				<div class="hr"><hr /></div>
				<h2>SWF Embed</h2>
				<div class="hr"><hr /></div>
				<cite>Uses "swfobject" third party plug-in (http://code.google.com/p/swfobject/)</cite>

				<p id="flash-embed">Please <a href="http://get.adobe.com/flashplayer/" target="_blank">Install the Flash player</a>.</p>
				<script type="text/javascript">

					var params = {};
					params.menu = "false";
					params.allowfullscreen = "true";
					params.allowscriptaccess = "always";
					params.bgcolor = "#ffffff"
					params.wmode = "opaque";

					var attributes = {};
					attributes.id = "video-player";
					attributes.name = "video-player";

					swfobject.embedSWF("swf/fpo-advertisement.swf","flash-embed","595","105","9.0.0.0",false,params,attributes);

				</script>

			</div>

		</div>

	</div>
	</div>
	<!-- END GLOBAL BODY -->

	<!-- START GLOBAL FOOTER -->
	<div class="glb-ftr-container">
	<div class="glb-ftr">

		<!-- containers for footer info -->

	</div>
	</div>
	<!-- END GLOBAL FOOTER -->

</div>
</div>
<!-- END GLOBAL WRAPPER -->

<!-- START JAVASCRIPT -->
<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="js/foo.global.js"></script>
<!-- END JAVASCRIPT -->

</body>
</html>
